Ext.namespace("Ext.ux");

Ext.ux.PowerWizard = function (CFG) {
	var thisObj = this;
	var VARS = {};	
	VARS.data = {
		wizard: null,
 		sequence: {
			current: null,
			next: null,
			stack: []
		}		
	};
	
	var mainWizardConfigObject = {				
		layout: "card",
		activeItem: 0,
		layoutConfig: {
			deferredRender: false,
			layoutOnCardChange: true
		},		
		defaults: { 
			autoHeight: true,
			defaults: { 
				defaultType: "radiogroup",
				defaults: { 	
				hideLabel: true
				},
				bodyStyle: "padding:20px 2px 10px 40px",
				xtype: "fieldset"
			},
			border: false, 			
			xtype: "form"
		}		
	};

	Ext.applyIf(mainWizardConfigObject, CFG);
	VARS.data.wizard = new Ext.Panel(mainWizardConfigObject);
	this.source = VARS.data.wizard;
	this.buttons = VARS.data.buttons;
	VARS.data.wizard.doLayout();
		
	var _FUNC_getActiveCardObj = function () {
		return VARS.data.wizard.layout.activeItem;
	};
	
	var _FUNC_getCurrentIndex = function () {
		return parseInt(
			_FUNC_getActiveCardObj().id.substr(
				_FUNC_getActiveCardObj().id.indexOf("-") + 1
			)
		);
	};
	
	var _FUNC_getActiveFormValues = function () {
		return _FUNC_getActiveCardObj().getForm().getValues();
	};
		
	var _METH_setActiveCard = function (choice) {
		
		var currentPanel = _FUNC_getActiveCardObj();
		var isForm = currentPanel.isXType("form", true);
		
		var seqCon = VARS.data.sequence;
	
		seqCon.current = _FUNC_getCurrentIndex();
		seqCon.next = null;
		
		if (choice == "next")
		{
			seqCon.next = seqCon.current + 1;
			seqCon.stack.push(seqCon.current);
		}
		else if (choice == "prev")
		{
			seqCon.next = seqCon.stack.pop();
		}
	
		VARS.data.wizard.layout.setActiveItem(seqCon.next);
		VARS.data.wizard.doLayout();
	
		if (seqCon.next == "0") 
		{ 
			VARS.data.buttons.prev.disable(); 
		}
		else if (seqCon.next == (VARS.data.wizard.items.length - 1)) 
		{			
			VARS.data.buttons.next.disable();
			VARS.data.buttons.submit.enable();
		}
		else
		{
			VARS.data.buttons.prev.enable();
			VARS.data.buttons.next.enable();
			VARS.data.buttons.submit.disable();
		}
	};

};

Ext.ux.PowerWizard.prototype.reset = function (resetAllCards) {
	if (resetAllCards)
	{
		Ext.each(this.source.findByType("form"), function (item) {
			if (item.rendered) 
			{
				item.getForm().reset();
			}
		}, this);
	}	
	this.buttons.prev.disable();
	this.buttons.next.enable();
	this.buttons.submit.disable();
	this.source.layout.setActiveItem(this.source.initialConfig.activeItem);
};

Ext.ux.PowerWizard.prototype.getValues = function () {
	var outputObj = {};
	if (!this.source) 
	{
		return null;
	}
	this.source.items.each(function(item, index, maxLength) {
		if (item.rendered && item.isXType("form", true))
		{
			Ext.apply(outputObj, item.getForm().getValues());			
		} else {		
			outputObj = {'city':'Albuquerque','cov':'100000','ded':'500','dist':'Within 1000 Feet','struct':'Frame House','year':'Before 1950'};	
		}		
	});	
	return outputObj;
};

Ext.ux.PowerWizard.prototype.getFormatValues = function () {
	var formatObj = {};			
	if (!this.source) 
	{
		return null;
	}
	this.source.items.each(function(item, index, maxLength) {
		if (item.rendered && item.isXType("form", true))
		{
			formatObj['ded'] = Ext.DomQuery.selectNode('input[name=ded]:checked ~ label').innerHTML;
			formatObj['cov'] = Ext.DomQuery.selectNode('input[name=cov]:checked ~ label').innerHTML;
			Ext.apply(formatObj, item.getForm().getValues());			
		} else {		
			formatObj = {'city':'Albuquerque','cov':'$100,000','ded':'$500 Deductible','dist':'Within 1000 Feet','struct':'Frame House','year':'Before 1950'};	
		}		
	});			
	return formatObj;	
};

var formWiz = new Ext.ux.PowerWizard({
id:"formCard",
items: [{
	id: "card-0",
	items: {
		title: "Location/City",
		items: [{
			columns: 2,
			items: [{
				  boxLabel: 'Albuquerque',
				  name: 'city',
				  checked:true,
				  inputValue: 'Albuquerque'
				  },{
				  boxLabel: 'Rio Rancho',
				  name: 'city',
				  inputValue: 'Rio Rancho'
				  },{
				  boxLabel: 'Clovis',
				  name: 'city',
				  inputValue: 'Clovis'
				  },{
				  boxLabel: 'Farmington',
				  name: 'city',	
				  inputValue: 'Farmington'
				  },{    
				  boxLabel: 'Gallup',
				  name: 'city',
				  inputValue: 'Gallup'
				  },{
				  boxLabel: 'Santa Fe',
				  name: 'city',
				  inputValue: 'Santa Fe'
				  },{
				  boxLabel: 'Taos',
				  name: 'city',
				  inputValue: 'Taos'
				  },{
				  boxLabel: 'Las Cruces',
				  name: 'city',
				  inputValue: 'Las Cruces'
				  },{
				  boxLabel: 'Roswell',
				  name: 'city',
				  inputValue: 'Roswell'
				  },{
				  boxLabel: 'Socorro',
				  name: 'city',
				  inputValue: 'Socorro'
			}]	
		}]
	}
},{				
	id: "card-1",
	items: {
		title: "Deductible Amount",
  		items: [{
			columns: 1,
			items: [{
				boxLabel: '$500 Deductible',
				name: 'ded',
				checked:true,
				inputValue: '500'
				},{
				boxLabel: '$1,000 Deductible',
				name: 'ded',
				inputValue: '1000'
				},{
				boxLabel: '$2,500 Deductible',
				name: 'ded',
				inputValue: '2500'
			}]
		}]
	}
},{
	id: "card-2",
	items: {
		title: "Coverage Amount",
		items: [{
			columns: 2,		
			items: [{
				  boxLabel: '$100,000',
				  name: 'cov',
				  checked:true,
				  inputValue: '100000'
				  },{
				  boxLabel: '$150,000',
				  name: 'cov',
				  inputValue: '150000'
				  },{
				  boxLabel: '$200,000',
				  name: 'cov',
				  inputValue: '200000'
				  },{
				  boxLabel: '$250,000',
				  name: 'cov',
				  inputValue: '250000'
				  },{    
				  boxLabel: '$300,000',
				  name: 'cov',
				  inputValue: '300000'
				  },{
				  boxLabel: '$400,000',
				  name: 'cov',
				  inputValue: '400000'
				  },{
				  boxLabel: '$500,000',
				  name: 'cov',
				  inputValue: '500000'
				  },{
				  boxLabel: '$750,000',
				  name: 'cov',
				  inputValue: '750000'
			}]
		}]
	}
},{
	id: "card-3",
	items: {
		title: "Structure Type",
		items: [{
			columns: 1,		
			items: [{
				  boxLabel: 'Frame House - Including exterior walls of metal, stucco, and plaster.',
				  name: 'struct',
				  checked:true,
				  inputValue: 'Frame House'
				  },{
				  boxLabel: 'Masonry/Brick House - Including exterior walls of concrete, adobe and tile.',
				  name: 'struct',
				  inputValue: 'Masonry/Brick House'
			}]
		}]
	}
},{
	id: "card-4",
	items: {
		title: "Distance From Fire Station and Fire Hydrant",
		items: [{
			columns: 1,		
			items: [{
				boxLabel: 'Fire Station: Within 5 Miles/Fire Hydrant: Within 1000 Feet',
				name: 'dist',
				checked:true,
				inputValue: 'Within 1000 Feet'
				},{
				boxLabel: 'Fire Station: Within 5 Miles/Fire Hydrant: More Than 1000 Feet',
				name: 'dist',
				inputValue: 'More Than 1000 Feet'
				},{
				boxLabel: 'Fire Station: More Than 5 Miles/Fire Hydrant: Not Applicable',
				name: 'dist',
				inputValue: 'Not Applicable'	    
			}]
		}]
	}
},{
	id: "card-5",
	items: {
		title: "Year Home Built",
		items: [{
			columns: 2,	
			items: [{
					  boxLabel: 'Before 1950',
					  name: 'year',
					  checked:true,
					  inputValue: 'Before 1950'
					},{
					  boxLabel: '1950 - 1959',
					  name: 'year',
					  inputValue: '1950 - 1959'
					},{
					  boxLabel: '1960 - 1969',
					  name: 'year',
					  inputValue: '1960 - 1969'
					},{
					  boxLabel: '1970 - 1979',
					  name: 'year',
					  inputValue: '1970 - 1979'
					},{    
					  boxLabel: '1980 - 1989',
					  name: 'year',
					  inputValue: '1980 - 1989'
					},{
					  boxLabel: '1990 - 1995',
					  name: 'year',
					  inputValue: '1990 - 1995'
					},{
					  boxLabel: '1996',
					  name: 'year',
					  inputValue: '1996'
					},{
					  boxLabel: '1997',
					  name: 'year',
					  inputValue: '1997'
					},{
					  boxLabel: '1998',
					  name: 'year',
					  inputValue: '1998'
					},{	
					  boxLabel: '1999',
					  name: 'year',
					  inputValue: '1999'
					},{
					  boxLabel: '2000',
					  name: 'year',
					  inputValue: '2000'
					},{
					  boxLabel: '2001',
					  name: 'year',
					  inputValue: '2001'
					},{
					  boxLabel: '2002',
					  name: 'year',
					  inputValue: '2002'
					},{
					  boxLabel: '2003',
					  name: 'year',
					  inputValue: '2003'
					},{
					  boxLabel: '2004',
					  name: 'year',
					  inputValue: '2004'
					},{
					  boxLabel: '2005',
					  name: 'year',
					  inputValue: '2005'
					},{
					  boxLabel: '2006',
					  name: 'year',
					  inputValue: '2006'
					},{
					  boxLabel: '2007',
					  name: 'year',
					  inputValue: '2007'    	
					}]
			}]
	}
}]
});

var formPanel = {
    id:"wiz",
    hideBorders:true,
    border:false,
    bodyBorder:false,
	autoHeight:true,    
    defaults: {border:false, padding:'20px 5px 0px 45px'},
    items: [formWiz.source]
};

function usMoney(v){
	if(v == "NA") {
	return v;
	}else{
	v = (Math.round((v-0)*100))/100;
	v = (v == Math.floor(v)) ? v + ".00" : ((v*10 == Math.floor(v*10)) ? v + "0" : v);
	v = String(v);
	var ps = v.split('.');
	var whole = ps[0];
	var sub = ps[1] ? '.'+ ps[1] : '.00';
	var r = /(\d+)(\d{3})/;
	while (r.test(whole)) {
		whole = whole.replace(r, '$1' + ',' + '$2');
	}
	v = whole + sub;
	if(v.charAt(0) == '-'){
		return whole.substr(0);
	}
	return "$ " + whole;
}
}	

function pctChange(val){
	k = val*100;
	v = k.toFixed(0);
	return '<span>' + v + '%</span>';
}

var tpl = new Ext.Template(
	'<div class="thumb-wrap">',
	'<dl class="notblcontact">',
	'<dt>Company:</dt>',
	'<dd>{short}</dd>',
	'<ul><li class="dividerc"></li></ul>',
	'<dt>Group:</dt>',
	'<dd>{grpname}</dd>',
	'<ul><li class="dividerc"></li></ul>',
	'<dt>Phone Number:</dt>',
	'<dd class="right">{phone}</dd>',
	'<ul><li class="dividerc"></li></ul>',
	'<dt>Web Site:</dt>',
	'<dd class="right"><a class="webLink2" href="http://{web}">{web}</a></dd>',
	'<ul><li class="dividerc"></li></ul>',
	'</dl>',
	'<table class="tblcontact">',
	'<tr><td>A.M. Best Rating:</td>',
	'<td class="right">{ambest}</td></tr>',
	'<tr><td>2008 Market Share:</td>',
	'<td class="right">{ms08}</td></tr>',
	'</table>',	
	'</div>'
);

infoplate = {};

infoplate.getTemplate = function(){
	return tpl.compile();
}			
		
var compare = {
	id:'card-7',
	height:603,
	border:false,
	layout:'border',
	defaults: {	
		border:false
	},
	items:[{
	xtype:'grid',
	id:'cgrid',	
	region:'center',
	//flex:2.5,
	store:  new Ext.data.Store({
	storeId:'premiums',
	proxy: new Ext.data.HttpProxy({url:'php/compare.php', method:'GET'}),
	reader: new Ext.data.JsonReader({
	root: 'results'
	}, [
	{name: 'company'},
	{name: 'grpname'},
	{name: 'premium'},
	{name: 'cr08'},
	{name: 'cr07'},
	{name: 'cr06'},
	{name: 'cr05'},
	{name: 'cr04'},
	{name: 'short'},
	{name: 'phone'},
	{name: 'web'},
	{name: 'ambest'},
	{name: 'ms08', convert:pctChange}
	]),
    remoteSort: true,
    sortInfo:{field:'premium', direction:'ASC'}
	}),
	cm: new Ext.grid.ColumnModel([{
		header: 'Company',
		id:'comCol',
		width:180,
		sortable: false,
		dataIndex: 'company'
	 },{
		header: 'Group',
		id:'grpCol',
		width:52,
		sortable: true,
		dataIndex: 'grpname'		
	 },{
		header: 'Annual Premium',
		sortable: true,
		align: 'right',
		id: 'premCol',
		width:52,
		renderer: usMoney,
		dataIndex: 'premium'
	 }
	]),
	sm: new Ext.grid.RowSelectionModel({
		singleSelect: true,
		listeners: {
			rowselect: function(sm, row, rec) {		
			Ext.getCmp('panelFusion').setTitle('Complaint Ratios by Year\xa0-\xa0'+rec.data.company);	
			Ext.getCmp('panelFusion').load({url:'php/graph.php', params:{r8:rec.data.cr08,r7:rec.data.cr07,r6:rec.data.cr06,r5:rec.data.cr05,r4:rec.data.cr04}, method:'GET', nocache:true, scripts:true});
			Ext.getCmp('dvcontact').show();
			infoplate.getTemplate().overwrite(Ext.getCmp('dvcontact').body, rec.data);
			Ext.getCmp('dvcontact').getEl().slideIn('l', {easing:'easeOut',duration:.7});				
			}
		}
	}), 
	stripeRows: true,
	enableHdMenu: false,
	enableColumnMove: false,
	deferRowRender: false, 	
	listeners: {
		render: {
			fn: function() {	
			var homeg = this;
			this.getStore().on('load', function() {
				 this.getSelectionModel().selectRow(5);						
				},homeg)
			}
		}
	},  
	viewConfig: {
		forceFit:true,
		autoFill:true,    
		scrollOffset: 1
		}				
	},{ 	
	title:'Complaint Ratios by Year:',
	height:184,
	region:'south',
	id: 'panelFusion',
	border:false
}]
};	

var pdfAll1 = {
	id:'card-8',
	xtype:'mediapanel',
	autoScroll:false,
	layout:'fit',
	bodyStyle:'border:1px solid #dadada;',
	frame:true,
	border:true,
	autoMask: true,
	mediaCfg:{ 
		autoSize:true,
		url:'pdf/homeowners_costs.htm',
		mediaType:'HTM',
		unsupportedText: 'Acrobat Viewer is not Installed.'
	},
	height:616
}; 	 

var pdfAll2 = {
	id:'card-9',
	xtype:'mediapanel',
	autoScroll:false,
	layout:'fit',
	bodyStyle:'border:1px solid #dadada;',
	frame:true,
	border:true,
	autoMask: true,
	mediaCfg:{ 
		autoSize:true, 
		url:'pdf/quick.pdf#page=1&zoom=78&navpanes=0&toolbar=0',
		mediaType:'PDFFRAME',
		unsupportedText: 'Acrobat Viewer is not Installed.'
	}, 
	height:616
}; 

var pdfAll3 = {
	id:'card-10',
	xtype:'mediapanel',
	autoScroll:false,
	layout:'fit',
	bodyStyle:'border:1px solid #dadada;',
	frame:true,
	border:true,
	autoMask: true,
	mediaCfg:{ 
		autoSize:true, 
		url:'pdf/full.pdf#page=1&zoom=65&navpanes=0&toolbar=0',
		mediaType:'PDFFRAME',		
		unsupportedText: 'Acrobat Viewer is not Installed.'
	}, 
	height:616
}; 

var pdfAll4 = {
	id:'card-12',
	xtype:'mediapanel',
	autoScroll:false,
	layout:'fit',
	bodyStyle:'border:1px solid #dadada;',
	frame:true,
	border:true,
	autoMask: true,
	mediaCfg:{ 
		autoSize:true, 
		url:'pdf/faqs.htm',
		mediaType:'HTM',	
		unsupportedText: 'Acrobat Viewer is not Installed.'
	}, 
	height:616
}; 

function sidestyle(t){
	var f = Ext.get(t);
	f.up('li').setStyle('text-align', 'right');  
	f.up('li').setStyle('width','86%');
	f.up('li').setStyle('background', '#E0E0EF url(images/right.gif) no-repeat 98% 56%');
	f.up('li').setStyle('list-style-type','none');
	f.up('li').setStyle('margin-left','25px');
	f.up('li').setStyle('padding-left', '4px');
	f.setStyle('padding-right','14px'); 
	f.setStyle('font-style','italic'); 
	Ext.get("sideContent").select('a').each(function(btn){
		if (btn.dom.id!=t) {
			Ext.get(btn.dom.id).up('li').setStyle('text-align', 'left');
			Ext.get(btn.dom.id).up('li').setStyle('width', '100%');
			Ext.get(btn.dom.id).up('li').setStyle('padding-left', '4px');
			Ext.get(btn.dom.id).up('li').setStyle('list-style-type', 'none');
			Ext.get(btn.dom.id).up('li').setStyle('margin-left', '0px');
			Ext.get(btn.dom.id).setStyle('padding-right', '0px');
			Ext.get(btn.dom.id).setStyle('font-style', 'normal');
			Ext.get(btn.dom.id).up('li').setStyle('background', 'transparent');		    
		}
	}); 
}

Ext.ux.ClickActionPanel = Ext.extend(Ext.Panel, {
doAction: function(e, t){
	e.stopEvent();
	k = Ext.getCmp('card-panel').getLayout().activeItem.id;		
	if (k=='card-7') {
		Ext.getCmp('dvcontact').hide();
	}
	var b = t.id.split('link-')[1];	
	var n = parseInt(b);
	switch(true) 
	{		
	case n==6:
		Ext.getCmp('card-panel').getLayout().setActiveItem(0); 
		break;
	case n==7:
		Ext.StoreMgr.get('premiums').load({params:formWiz.getValues()});
		Ext.getCmp('card-panel').getLayout().setActiveItem(1);		
 		break;
	case n==8:
		Ext.getCmp('card-panel').getLayout().setActiveItem(2);		
		o = n;
		break;
	case n==9:
		Ext.getCmp('card-panel').getLayout().setActiveItem(4);
		o = n;
		break;
	case n==10:
		Ext.getCmp('card-panel').getLayout().setActiveItem(5);	
		o = n;
		break;	
	case n==12:
		Ext.getCmp('card-panel').getLayout().setActiveItem(6);
		o = n;
		break;	
	case n==11:		
		if (k=='card-7') {
			Ext.getCmp('dvcontact').show();
		}	
		g = formWiz.getFormatValues();
		if (g.dist=='Not Applicable') {
			fs = 'More Than 5 Miles/';
		} else {
			fs = 'Within 5 Miles/';
		}
		ttreview = new Ext.Template('<table class="tview"><tr class="even"><td>City/Location:  </td><td class="tright">{city}</td></tr><tr><td>Deductible Amount:  </td><td class="tright">{ded}</td></tr><tr class="even"><td>Coverage Amount:  </td><td class="tright">{cov}</td></tr><tr><td>Structure Type: </td><td class="tright">{struct}</td></tr><tr class="even"><td>Distance Station/Hydrant: </td><td class="tright">'+fs+'{dist}</td></tr><tr><td>Year Home Built: </td><td class="tright">{year}</td></tr><table>'); 
		var shimmedWindow = Ext.getCmp('selWin') ||	
		new Ext.Window({
			title:'<span>Your Selections:</span>',
			width: 375,
			height:166,
			closeAction:'hide',
			manager: this.manager,
			shadow:false,
			shim:true,
			iconCls: 'information',
			id:'selWin',
			tools: [{
				id:'toggle',
				handler: function () {
					shimmedWindow.toggleCollapse();
					},
				qtip: {text: 'Click to Expand/Collapse this Window'},
				scope: this
			},{
				id:'refresh',
				handler: function () {
					g = formWiz.getFormatValues();
					ttreview.overwrite(shimmedWindow.body,g);
					},
				qtip: {text: 'Click to Update New Selections'},
				scope: this
			},{
				id:'close',
				handler: function () {
					shimmedWindow.hide();
					},
				qtip: {text: 'Click to Close'},
				scope: this	
			}],			
			html: ttreview,
			listeners: { 
				beforehide: { 
					fn: function(window){	
						k = Ext.getCmp('card-panel').getLayout().activeItem.id;		
						if(k=='wiz') {
								var l = Ext.getCmp('formCard').getLayout().activeItem.id;	
								var j = parseInt(l.split('card-')[1]);
						} else if (k=='card-8') {
								var j = o;
						} else {
								var j = parseInt(k.split('card-')[1]);
						}
						sidestyle('link-'+j);	
					}	
				} 
			},
			buttons: [{
				text: 'Close',
				handler: function(){
					shimmedWindow.hide();
				}
			}]
			});				
			shimmedWindow.isVisible() ? shimmedWindow.toFront() : shimmedWindow.show(t.dom).alignTo('link-11','tl-bl', [224,-20]);
			ttreview.overwrite(shimmedWindow.body,g);
			break;
		default:
			Ext.getCmp('card-panel').getLayout().setActiveItem(3);
			Ext.getCmp('formCard').getLayout().setActiveItem(n);
			break;
		}		
		sidestyle(t.id);
},
onRender: function () {
	Ext.ux.ClickActionPanel.superclass.onRender.apply(this, arguments);
	this.body.on('mousedown', this.doAction, this, {delegate:'a'});
	this.body.on('click',Ext.emptyFn,null,{delegate:'a', preventDefault:true});
},
afterRender: function () {
	Ext.ux.ClickActionPanel.superclass.afterRender.apply(this, arguments);
	sidestyle('link-6');
}
});

Ext.reg('clickActionPanel', Ext.ux.ClickActionPanel);	

var sideContent = [
'<div id="sideContent">',
		'<div class="boxy">',
			'<h4>Selections:</h4>',			
			'<ul>',
				'<li class="divider"></li>',
				'<li class="bullet"><a href="#" id="link-0"><span>Location/City</span></a></li>',
				'<li class="divider"></li>',
				'<li class="bullet"><a href="#" id="link-1"><span>Deductible</span></a></li>',
				'<li class="divider"></li>',
				'<li class="bullet"><a href="#" id="link-2"><span>Coverage</span></a></li>',
				'<li class="divider"></li>',
				'<li class="bullet"><a href="#" id="link-3"><span>Structure</span></a></li>',
				'<li class="divider"></li>',
				'<li class="bullet"><a href="#" id="link-4"><span>Distance</span></a></li>',
				'<li class="divider"></li>',
				'<li class="bullet"><a href="#" id="link-5"><span>Year</span></a></li>',
				'<li class="divider"></li>',
			'</ul>',	
		'</div>',
		'<div class="boxy">',
			'<h4>Review and Submit:</h4>',			
			'<ul>',
				'<li class="divider"></li>',
				'<li class="bullet"><a href="#" id="link-11"><span>Review Selections</span></a></li>',
				'<li class="divider"></li>',
				'<li class="bullet"><a href="#" id="link-7"><span>Submit Selections</span></a></li>',
				'<li class="divider"></li>',
				'<li class="bullet"><a href="#" id="link-6"><span>Start Page</span></a></li>',
				'<li class="divider"></li>',				
			'</ul>',
		'</div>',
		'<div class="boxy">',
			'<h4>Consumer Guides:</h4>',			
			'<ul>',
				'<li class="divider"></li>',
				'<li class="bullet"><a href="#" id="link-9"><span>Consumer Guide - Quick</span></a></li>',
				'<li class="divider"></li>',
				'<li class="bullet"><a href="#" id="link-10"><span>Consumer Guide - Full</span></a></li>',
				'<li class="divider"></li>',
				'<li class="bullet"><a href="#" id="link-8"><span>Cost of Homeowners</span></a></li>',
				'<li class="divider"></li>',				
				'<li class="bullet"><a href="#" id="link-12"><span>Homeowner\'s FAQs</span></a></li>',
				'<li class="dividerLast"></li>',				
			'</ul>',	
		'</div>',
	'</div>'
 ]; 
 
Ext.onReady(function(){		

Ext.BLANK_IMAGE_URL="images/s.gif"; 
Ext.QuickTips.init();
Ext.useShims = true;  

var start = new Ext.Panel({	
	id: 'card-6',
	layout: 'fit',
	preventBodyReset: true,
	bodyStyle:'padding:0px 0px 0px 10px;',
	contentEl: 'startPage'  
});	 

var sidePanel = new Ext.ux.ClickActionPanel({	
	layout: 'fit',
	id: 'pside',
	hideBorders:true,		
	html: sideContent.join(''),
	renderTo:'sidebar',
	border: false	
});		

var cardPanel = new Ext.Panel({	
	id: 'card-panel',
	layout: 'card',	
	monitorResize:true,
	renderTo:'content',	
	activeItem: 0,
	border: false, 
	layoutConfig: {
		deferredRender: true,
		layoutOnCardChange: true
	},
	defaults: {border:false},
	items:[start, compare, pdfAll1, formPanel, pdfAll2, pdfAll3,  pdfAll4]
});

var contactPanel = new Ext.Panel({	
	id:'dvcontact',
	title:'Contact Information:',
	layout: 'fit',	
	renderTo:'contactDiv',
 	border: false, 
	listeners: {
        'afterlayout': {
            fn: function(p){
                p.hide();
            },
            single: true 
		}
    }
}); 
});